import { Layout } from "antd";
import "./index.scss";
import { PoweroffOutlined } from "@ant-design/icons";
import { Menu } from "antd";
import src from "../../static/images/1.png";
import src1 from "../../static/images/2.png";
import src3 from "../../static/images/4.png";
import { Link, Outlet, useNavigate } from "react-router-dom";

const { Header, Sider, Content } = Layout;
const Home = () => {
  const navigate = useNavigate();
  const items = [
    {
      key: "1",
      icon: (
        <img
          src="https://img.axureshop.com/07/b8/9b/07b89b58b7ef43ddb3340e5ed6e394be/images/%E6%A1%86%E6%9E%B6/u69.png"
          alt=""
          width="14px"
          height="15px"
        />
      ),
      label: <Link to="/home/CumulativeOverview">累计概况</Link>,
    },
    {
      key: "2",
      icon: (
        <img
          src="https://img.axureshop.com/07/b8/9b/07b89b58b7ef43ddb3340e5ed6e394be/images/%E6%A1%86%E6%9E%B6/u70.png"
          alt=""
          width="14px"
          height="15px"
        />
      ),
      label: <Link to="/home/examination">行政许可备案审批</Link>,
    },
    {
      key: "3",
      icon: (
        <img
          src="https://img.axureshop.com/07/b8/9b/07b89b58b7ef43ddb3340e5ed6e394be/images/%E6%A1%86%E6%9E%B6/u73.png"
          alt=""
          width="14px"
          height="15px"
        />
      ),
      label: <Link to="/home/Training">培训机构管理</Link>,
    },
    {
      key: "4",
      icon: (
        <img
          src="https://img.axureshop.com/07/b8/9b/07b89b58b7ef43ddb3340e5ed6e394be/images/%E6%A1%86%E6%9E%B6/u71.png"
          alt=""
          width="14px"
          height="15px"
        />
      ),
      label: <Link to="/home/BusinessLicense">营业执照管理</Link>,
    },
    {
      key: "5",
      icon: (
        <img
          src="https://img.axureshop.com/07/b8/9b/07b89b58b7ef43ddb3340e5ed6e394be/images/%E6%A1%86%E6%9E%B6/u72.png"
          alt=""
          width="14px"
          height="15px"
        />
      ),
      label: <Link to="/home/TeacherManage">老师管理</Link>,
    },
    {
      key: "6",
      icon: (
        <img
          src="https://img.axureshop.com/07/b8/9b/07b89b58b7ef43ddb3340e5ed6e394be/images/%E6%A1%86%E6%9E%B6/u79.png"
          alt=""
          width="14px"
          height="15px"
        />
      ),
      label: <Link to="/home/NewCourse">新课程审批</Link>,
    },
    {
      key: "7",
      icon: (
        <img
          src="https://img.axureshop.com/07/b8/9b/07b89b58b7ef43ddb3340e5ed6e394be/images/%E6%A1%86%E6%9E%B6/u80.png"
          alt=""
          width="14px"
          height="15px"
        />
      ),
      label: <Link to="/home/studentFiling">学生备案</Link>,
    },
    {
      key: "8",
      icon: (
        <img
          src="https://img.axureshop.com/07/b8/9b/07b89b58b7ef43ddb3340e5ed6e394be/images/%E6%A1%86%E6%9E%B6/u74.png"
          alt=""
          width="14px"
          height="15px"
        />
      ),
      label: <Link to="/home/policyArticles">政策通告文章</Link>,
    },
    {
      key: "9",
      icon: (
        <img
          src="https://img.axureshop.com/07/b8/9b/07b89b58b7ef43ddb3340e5ed6e394be/images/%E6%A1%86%E6%9E%B6/u75.png"
          alt=""
          width="14px"
          height="15px"
        />
      ),
      label: <Link to="/home/Report">举报信息</Link>,
    },
    {
      key: "10",
      icon: (
        <img
          src="https://img.axureshop.com/07/b8/9b/07b89b58b7ef43ddb3340e5ed6e394be/images/%E6%A1%86%E6%9E%B6/u76.png"
          alt=""
          width="14px"
          height="15px"
        />
      ),
      label: <Link to="/home/UserManage">账号管理</Link>,
    },
    {
      key: "11",
      icon: (
        <img
          src="https://img.axureshop.com/07/b8/9b/07b89b58b7ef43ddb3340e5ed6e394be/images/%E6%A1%86%E6%9E%B6/u77.png"
          alt=""
          width="14px"
          height="15px"
        />
      ),
      label: <Link to="/home/setUp">设置</Link>,
    },
  ];
  const close = () => {
    sessionStorage.clear();
    navigate("/login", { replace: true });
  };
  return (
    <Layout className="home">
      <Header
        className="header"
        style={{ position: "fixed", top: 0, zIndex: 1, width: "100%" }}
      >
        <div style={{ display: "flex" }}>
          <img src={src} />
          <div className="div1">
            <div>成都市</div>
            <div>辅导培训机构监管平台</div>
          </div>
          <div className="div2">
            <img src={src1} alt="" />
          </div>
          <div className="div3"></div>
        </div>
        <div style={{ display: "flex" }}>
          <div></div>
          <div className="img2">
            <img src={src3} alt="" />
          </div>
          <div>
            <span>教育局</span>
          </div>
          <PoweroffOutlined onClick={close} className="icon" />
        </div>
      </Header>
      <Layout>
        <Sider
          className="sider"
          width="238"
          style={{
            background: "#eef5fb",
            overflow: "auto",
            height: "100vh",
            position: "fixed",
            left: 0,
            top: 60,
            bottom: 0,
          }}
        >
          <Menu
            style={{
              width: "238px",
              background: "#eef5fb",
              border: "none",
            }}
            defaultSelectedKeys={["1"]}
            mode="inline"
            items={items}
          />
        </Sider>
        <Content>
          <div className="content">
            <Outlet />
          </div>
        </Content>
      </Layout>
    </Layout>
  );
};
export default Home;
